<html>
<head>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="heading">
Interface Module (last update 03/06/01)
</p>
<p class="subheading">
Description:
</p>
<p>
The module adds objects and methods for communicating information to the player/user and
accepting input via gui elements. It's based around the idea of "interface" objects, which
are containers holding different input/output elements. Think of an interface as a kind of
pinboard, to which you pin other elements such as menus, buttons, labels etc. The interface
itself is by default invisible, only the elements it contains are seen (you can change this
using the <a href="#setBgColor">setBgColor</a> method.) The elements you add to an interface
can only exist within the interface. So if you create a menu, you will not be able to use it
until you add it to an interface.
</p>
<p class="subheading">
To use:
</p>
<p>
The code can be linked in to your script by adding this line to the &lt;HEAD&gt; section of
your document:
</p>
<p class="jcode">
&lt;script language="Javascript" src="gamelib_interface.js"&gt;&lt;/script&gt;
</p>
<p>
You then instantiate an interface by adding the following to your script:
</p>

<p class="jcode">
myInterface=new In_Interface(200,200,'../gamelib');
</p>

<p>
The arguments are width, height and finally the path to the gamelib directory (the one
containing all the gamelib_*.js files) The purpose of the final argument there is to help
the interface find the image files needed to create certain elements. There should be no
slash after the path to the directory. Ok, say you now want to add a numeric display to
the interface, at position 50,50 (the position is RELATIVE to the interface's position)
with 6 digits, using font face 1:
</p>

<p class="jcode">
myDisplay=new In_NumericDisplay(50,50,6,1);<br />
myInterface.add(myDisplay);
</p>

<p>
As you can see, you create the element first, <em>then</em> add it to the interface.
This is the case for all elements. You can keep adding elements to an interface, or
you can create multiple interfaces and add some elements to each - handy for multi-screen
GUIs! The interface itself can be shown, hidden, and moved in the x, y and z axis. It
does not interact with sprites or layers, nor does it respond to the keyboard - however,
it can be made <a href="#makeDraggable">draggable</a>!
</p>

<a name="interfaceElements">

<p class="subheading">
List of elements that can be placed inside an interface
</p>

<p>
<a href="buttondoc.html">Button</a><br />
<a href="imagedoc.html">Image</a><br />
<a href="labeldoc.html">Label</a><br />
<a href="menudoc.html">Cascading Menu</a><br />
<a href="numericdisplaydoc.html">Numeric Display</a><br />
</p>

<p class="subheading">
List of methods for interface module
</p>

<p>
<a href="#add">add</a><br>
<a href="#hide">hide</a><br>
<a href="#makeDraggable">makeDraggable</a><br>
<a href="#makeUndraggable">makeUndraggable</a><br>
<a href="#moveTo">moveTo</a><br>
<a href="#setBackground">setBackground</a><br>
<a href="#setBgColor">setBgColor</a><br>
<a href="#setZ">setZ</a><br>
<a href="#show">show</a><br>
</p>

<p class="subheading">
List of properties for interface module
</p>

<p>
<a href="#bgColor">bgColor</a><br>
<a href="#element">element</a><br>
<a href="#visible">visible</a><br>
<a href="#x">x</a><br>
<a href="#y">y</a><br>
<a href="#z">z</a><br>
</p>


<p class="subheading">
Descriptions of methods for interface
</p>

<table>
<tr>
<th>Method</th><th NOWRAP>Parameters</th><th>Description</th>
</tr>

<tr>
<a name="add">
<td>add</td><td>Object</td><td>
Adds an element to this interface. The element must be an <a href="#interfaceElements">interface element</a>, otherwise nothing
will happen. Please note that you cannot use, or even see an element until it has been added to
an interface.
</td>
</tr>

<tr>
<a name="hide">
<td>hide</td><td>(none)</td><td>
Hides the elements contained by the interface
</td>
</tr>

<tr>
<a name="makeDraggable">
<td>makeDraggable</td><td>(none)</td><td>
Makes the interface draggable. When dragged, all the elements the interface contains will move
along with it.
</td>
</tr>

<tr>
<a name="makeUndraggable">
<td>makeUndraggable</td><td>(none)</td><td>
Stops the interface from being draggable.
</td>
</tr>

<tr>
<a name="moveTo">
<td>moveTo</td><td>Numeric, Numeric</td><td>
Moves the interface to position x,y. This means all the elements contained by this interface
will also be moved as an elements position is relative to the position of the interface
that contains it.
</td>
</tr>

<tr>
<a name="setBackground">
<td>setBackground</td><td>URL</td><td>
Sets a background image in the interface itself. By default, interfaces are invisible,
this gives them a presence on the page. The image will be tiled if it's not as wide or
high as the interface.
</td>
</tr>

<tr>
<a name="setBgColor">
<td>setBgColor</td><td>Color</td><td>
Sets the background color of the interface itself. By default, interfaces are invisible,
this gives them a presence on the page.
</td>
</tr>

<tr>
<a name="setZ">
<td>setZ</td><td>Numeric</td><td>
Sets the Z index of the interface. Layers, sprites and interfaces all have a Z index; objects
with a higher Z index pass over objects with lower Z indexes. Interfaces differ from other
objects in that if an interface is made <a href="#makeDraggable">draggable</a> and it is
subsequently dragged, its Z index will be 1 higher than the current highest Z index in all
other interfaces on the page. If there are no other interfaces, then the Z index won't be
changed.
</td>
</tr>

<tr>
<a name="show">
<td>show</td><td>(none)</td><td>
Shows the elements contained by the interface
</td>
</tr>

</table>


<p class="subheading">
Descriptions of properties for interface
</p>

<table>
<tr>
<th>Property</th><th NOWRAP>Data Type</th><th NOWRAP>Read/Write</th><th>Description</th>
</tr>

<tr>
<a name="bgColor">
<td>bgColor</td><td>Color</td><td>R</td><td>
The current background color of the interface. Normally this will be an empty string,
as interfaces have no color by default. Set the color using the
<a href="#setBgColor">setBgColor</a> method.
</td>
</tr>

<tr>
<a name="element">
<td>element</td><td>Array</td><td>R</td><td>
This is an array of all the elements an interface contains. It is filled as the
<a href="#add">add</a> method is used, so the first element you add (eg, and numeric
display or menu or whatever) will be at index 0, the next at index 1, etc etc. This
is useful as you can access the element by using this array, instead of having
to create global variables for all elements in an interface.
</td>
</tr>

<tr>
<a name="visible">
<td>visible</td><td>Boolean</td><td>R</td><td>
If true, the interface and its elements are visible. * Note the interface itself will not be
visible if it has no background color set (the default.) This is set by the
<a href="#show">show</a> and <a href="#hide">hide</a>
methods.
</td>
</tr>

<tr>
<a name="x">
<td>x</td><td>Numeric</td><td>R</td><td>
The x position of the interface. Set using the <a href="#moveTo">moveTo</a> method.
</td>
</tr>

<tr>
<a name="y">
<td>y</td><td>Numeric</td><td>R</td><td>
The y position of the interface. Set using the <a href="#moveTo">moveTo</a> method.
</td>
</tr>

<tr>
<a name="z">
<td>z</td><td>Numeric</td><td>R</td><td>
The z position of the interface. Set using the <a href="#setZ">setZ</a> method.
</td>
</tr>


</table>

</body>
</html>